<!--  -->
<template>
  <div class="bg">
    <div class="glass-container" id="glass" style="position: relative;left: 65%;top: 50%;translate:-20% -80%;">
      <h2>Login</h2>
      <el-form :model="ruleForm" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" suffix-icon="UserFilled"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" suffix-icon="Edit"/>
        </el-form-item>
        <el-form-item>
            <el-button type="success" icon="Check" @click="login">
                登录
            </el-button>
            &nbsp;&nbsp;&nbsp;
            没有账号？ <router-link to="/registe">点击注册</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>  
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: "Login",
  components: {},
  props: {},
  data() {
    return {
          ruleForm:{
            username:'',
              password:'',
              username:'admin',
              password:'admin'
          },
          rules:{
              username:[
                  {required: true, message:'输入用户名不能为空', trigger: 'blur'},
                  {pattern:/^\w{3,5}$/, message:'用户名长度为3-5位', trigger: 'change'},
              ],
              password:[
                  {required: true, message:'输入密码不能为空', trigger: 'blur'},
                  {pattern:/^\w{5-16}$/, message:'密码长度为5-16位', trigger: 'change'},
              ]
          },
        err:''
    };
  },
  computed: {},
  watch: {},
  methods: {
    login(){
        axios.post("http://localhost:8888/login",this.ruleForm)
        .then((res)=>{
            // console.log(res.data);
            if(res.data){
                this.$store.state.user=res.data
                console.log(this.$store.state.user);
                this.$router.push('/')
                // this.$router.back()
            }else{
              ElMessage({
                message: '账号或密码错误.',
                type: 'error',
              })
            }
        })
    }
  },
  created() {},
  mounted() {},
};
</script>

<style scoped>
.bg{
    width: 100%;
    height: 100%;
    background:url(http://localhost:8888/cover/54c2025daa24471c805954cabe442a0c);
    background-size: cover;
    position: absolute;
  }

/* This was made with GlassGenerator.netlify.app */ 

.glass-container{
    width: 700px;
    height: 375px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 18px;
    /* backdrop-filter: blur(18px); */
    background-color: rgba(163,228,250, 0.388);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 6px rgba(255,255,255,0.4) solid;
    border-bottom: 6px rgba(40,40,40,0.35) solid;
    border-right: 6px rgba(40,40,40,0.35) solid;
}
</style>
